<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>DataTable适配TkSite后端框架初始化例子</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="./js/jquery.js"></script>
    <script type="text/javascript" charset="utf8" src="./js/jquery.dataTables.js"></script>

    <script>
        function ajaxAdapter(url) {
            return {
                "url": url,
                "dataFilter": function (data) {
                    var json = jQuery.parseJSON(data);
                    json.recordsTotal = json.total;
                    json.recordsFiltered = json.total;
                    json.draw = json.page;
                    json.data = json.rows;
                    return JSON.stringify(json);
                }
            }
        }

        $(function () {
            $('#example').DataTable({
                lengthMenu: [[10, 25, 50], [10, 25, 50]],
                processing: true,
                serverSide: true,
                ajax: ajaxAdapter("data/tksite_json_data.txt"),
                columns: [
                    {data: null},
                    {data: 'name'},
                    {data: 'age'}
                ],
                rowCallback: function (row, data, iDisplayIndex) {
                    var info = this.api().page.info();
                    var page = info.page;
                    var length = info.length;
                    var index = (page * length + (iDisplayIndex + 1));
                    $('td:eq(0)', row).html(index);
                }
            });
        });
    </script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th></th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
</table>
</body>
</html>